<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { universitiesList, conferenceParticipantSave } from "../../api/app";

onMounted(() => {
  getOptions();
});

const schoolOptions = ref([]);
async function getOptions() {
  const { data } = await universitiesList();
  schoolOptions.value = data;
}

function handleSchoolChange(val) {
  const index = schoolOptions.value.findIndex((i) => i.id === val);
  formData.participants.forEach((i) => {
    i.universityName = schoolOptions.value[index].universityName;
  });
}

// 初始化表单数据
const formData = reactive({
  schoolCode: "",
  participants: [
    {
      universityName: "",
      participantName: "",
      position: "",
      phoneNumber: "",
      remark: "",
    },
    {
      universityName: "",
      participantName: "",
      position: "",
      phoneNumber: "",
      remark: "",
    },
  ],
});

// 校验规则
const rules = reactive({
  schoolCode: [{ required: true, message: "请选择学校", trigger: "change" }],
  participants: {
    $each: {
      participantName: [
        { required: true, message: "请输入姓名", trigger: "blur" },
      ],
      phoneNumber: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
        {
          pattern: /^1[3-9]\d{9}$/,
          message: "请输入正确的手机号码",
          trigger: "blur",
        },
      ],
      position: [{ required: true, message: "请输入职务", trigger: "blur" }],
    },
  },
});

// 表单引用
const formRef = ref(null);

// 提交表单
const submitForm = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      conferenceParticipantSave(formData.participants).then((res) => {
        if (res.code === 200) {
          ElMessage.success("表单提交成功！");
          resetForm();
        } else {
          ElMessage.error(res.data.message);
        }
      });
    } else {
      console.log("表单校验失败");
      return false;
    }
  });
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
};
</script>

<template>
  <div class="Ino">
    <div class="ino_title">
      高校核心业务梳理及业务事项编目专题培训会主会场参会回执
    </div>

    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="auto"
      class="form-container"
    >
      <el-row :gutter="20">
        <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
          <el-form-item label="高校" prop="schoolCode">
            <el-select
              v-model="formData.schoolCode"
              placeholder="请选择高校"
              class="form-select"
              filterable
              @change="handleSchoolChange"
            >
              <el-option
                v-for="item in schoolOptions"
                :key="item.id"
                :label="item.universityName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <div class="remark">
            注：主会场参会人员填写本回执。各高校核心业务梳理、业务事项编目牵头部门负责同志（2名）在主会场参会。
          </div>
        </el-col>
        <el-col :span="24" class="divider">
          <el-divider border-style="dashed" />
        </el-col>

        <template v-for="(item, index) in formData.participants" :key="index">
          <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
            <el-form-item
              label="姓名"
              :prop="`participants.${index}.participantName`"
              :rules="rules.participants.$each.participantName"
            >
              <el-input
                v-model="item.participantName"
                placeholder="请输入姓名"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
            <el-form-item
              label="职务"
              :prop="`participants.${index}.position`"
              :rules="rules.participants.$each.position"
            >
              <el-input v-model="item.position" placeholder="职务" clearable />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
            <el-form-item
              label="手机号码"
              :prop="`participants.${index}.phoneNumber`"
              :rules="rules.participants.$each.phoneNumber"
            >
              <el-input
                v-model="item.phoneNumber"
                placeholder="手机号码"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="8" :md="6" :lg="6" :xl="6">
            <el-form-item label="备注">
              <el-input v-model="item.remark" placeholder="备注" clearable />
            </el-form-item>
          </el-col>

          <el-col :span="24" v-if="index !== formData.participants.length - 1">
            <el-divider border-style="dashed" />
          </el-col>
        </template>

        <el-col :span="24">
          <div class="form-actions">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.Ino {
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}
.ino_title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}

.form-container {
  margin-top: 20px;
}

::v-deep .el-form-item__label {
  color: #ffffff;
}

.form-actions {
  margin-top: 20px;
  text-align: center;
}

.remark {
  font-size: 13px;
  color: #f40e0e;
  margin-bottom: 10px;
}

.divider {
  ::v-deep .el-divider--horizontal {
    margin-top: 0;
  }
}
</style>
